<template>
    <el-row>
        <el-col :span="24" style="padding-right: 8px; margin-bottom: 30px">
            <div class="grid-content">
                <div class="userInfo">
                    <!-- <div class="userImg"> -->
                    <!-- <img src="@/assets/imgs/default-avatar.png" alt="" /> -->
                    <!-- <img src="@/assets/imgs/person.png" alt=""/> -->
                    <!-- </div> -->
                    <div class="userRight">
                        <h2 class="name">
                            你好，<span>{{ userInfo.userName }}</span>
                        </h2>
                        <p class="loginTime">登录日期：{{ currentTime }}</p>
                        <p class="userWord" v-html="soulWord"></p>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 24 }"
            :lg="{ span: 16 }"
            :xl="{ span: 16 }"
            style="padding-right: 8px; margin-bottom: 30px"
        >
            <UpdateTimeline style="border-radius: 10px" />
        </el-col>
        <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 24 }"
            :lg="{ span: 8 }"
            :xl="{ span: 8 }"
            style="padding-right: 8px; margin-bottom: 30px"
        >
            <TodoList style="border-radius: 8px" />
        </el-col>
    </el-row>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { ElRow, ElCol } from 'element-plus'
import { useStore } from 'vuex'
import { random } from 'lodash-es'
import dayjs from 'dayjs'
import soulSoother from '@/assets/typings/home'
import UpdateTimeline from './UpdateTimeline.vue'
import TodoList from './todo-list/Index.vue'
export default defineComponent({
    components: {
        ElRow,
        ElCol,
        UpdateTimeline,
        TodoList
    },
    setup() {
        // 首页心灵鸡汤
        // const word = soulSoother['content'][soulSoother['content'].length - 1]
        const word = soulSoother['content'][random(0, soulSoother['content'].length - 1)]
        const soulWord = ref(word)
        const wordColor = soulSoother['color'][random(0, soulSoother['color'].length - 1)]
        const soulWordColor = ref(wordColor)
        const currentTime = ref(dayjs().format('YYYY-MM-DD'))

        const store = useStore()

        return {
            soulWord,
            soulWordColor,
            currentTime,
            userInfo: computed(() => store.state.user.userInfo)
        }
    }
})
</script>

<style scoped lang="scss">
.grid-content {
    background-color: #fff;
    border-radius: 10px;
    /* height: 295px; */
    border: 1px solid #e4e7ed;
    .loginTime {
        color: #787f95;
        padding-top: 12px;
    }
}

.userInfo {
    display: flex;
    align-items: flex-start;
    height: 100%;

    .userImg {
        width: 120px;
        min-width: 100px;
        height: 120px;

        margin-left: 10px;
        margin-top: 10px;
        vertical-align: middle;

        img {
            width: 100%;
            border-radius: 50%;
        }
    }
}

.userRight {
    padding: 20px 20px 20px 40px;

    .name {
        font-size: 20px;
        font-weight: bold;
        color: #909399;
    }

    h2 {
        font-size: 22px;
        color: #121c40;
        margin: 0;
        border: 0;
        font-weight: 400;
    }

    .userWord {
        font-size: 14px;
        color: #787f95;
        margin-top: 15px;
        line-height: 1.4;
        color: v-bind('soulWordColor');
    }
}
</style>
